<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>新闻列表</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" href="../../css/app.css">
		<style type="text/css">
			/*#list {margin-top: -1px;}*/
			*{margin: 0;padding: 0;}
			html,body{width: 100%;height: 100%;background: #ffffff}
			ul,li{list-style: none;}
			.mui-content{width: 100%!important;height: 100%;background: #f3f3f3;overflow: auto;}
			.mui-content::-webkit-scrollbar { display: none;}
			.mui-content ul{width: 100%;} 
			.mui-content ul li{width: 100%;height: 1.3rem;background: #fff;margin-bottom: 0.16rem solid #ccc;position: relative;}
			.mui-content ul li .title{height: 0.8rem;font-size: 0.32rem;line-height: 0.48rem;position: absolute;top: 0.26rem;left: 0.225rem;width:6.5rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
			.mui-content ul li img{width: 0.18rem;position: absolute;top:0.52rem;right: 0.33rem;}
			.mui-content ul li .time{width:3.885rem ;font-size:0.24rem;color:#9b9b9b;position: absolute;bottom: 0.28rem;left: 0.225rem;height:0.24rem;}
			.mui-content ul li .time span:first-child{margin-right: 0.5rem;}
			.mui-table-view:before,.mui-table-view:after{content: none;}
			.mui-content>.mui-table-view:first-child{margin-top: 0;}
			.mui-pull-bottom-pocket, .mui-pull-top-pocket{visibility: visible;}
		</style>
	</head>
	<body>
		<div id="scroll" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<ul class="mui-table-view mui-table-view-chevron">
					<template v-for="content in contentList">
						<li :contentId='content.oid' class="mui-table-view-cell">
							<div class="title">{{content.title}}</div>
							<img src="../../images/yuyue/arr.png"/>
							<div class="time">
								<span v-text="content.publishStartTime.substr(0,10)"></span>
							</div>
						</li>
					</template>
				</ul>
			</div>
		</div>
	</body>
	<script>
		function my_immersed(){
			
		}
	</script>
	<script src="../../js/immersed.js"></script>
	<script src="../../js/mui.min.js"></script>
	<script src="../../js/jquery2.2.4.min.js"></script>
	<script src="../../js/common.js"></script>
	<script src="../../js/vue.min.js"></script>
	<script src="../../js/app.js"></script>
	<script type="text/javascript">
		var pageStart = 0;//当前页码
		var pageSize = 20;//每页显示的条数
		var maxPageNumber = 1;//最大页数
		var columnId = utils.getUrlParam("columnId");//从上个页面获取的栏目id
		var site = getCurrentSite();//获取站点
		var siteId='';
		if(site != null){
			siteId = site.id;
		}else{
			siteId='1';
		}
		mui.init({
			pullRefresh: {
				container: "#scroll", //下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
				  up: {//上拉加载
			          auto:true,
					  contentrefresh: '正在加载...',
					  callback: pullupRefresh
			       }
			}
		});
	
		var news = new Vue({
			  el: '#scroll',
			  data: {
			  	contentList:[]
			  }
			  
		});
		
		/**
		 * 上拉加载页面数据
		 */
		function pullupRefresh() {
		    setTimeout(function() {
		        pageStart++;//翻下一页
		        if(pageStart<=maxPageNumber){
		       		loadMore(pageStart,pageSize);//获取数据的方法
		        }else{
		        	mui('#scroll').pullRefresh().endPullupToRefresh(true);
		        }
		    }, 100);
		}
		
		//加载数据
		function loadMore(pageStart,pageSize) {
		    var param = 'siteId='+siteId+'&columnId='+columnId+'&pageNumber=' + pageStart+ '&random=' + Math.random()+'&pageSize=' + pageSize;
			var url = 'appHttpService/queryCmsContentByColumnId.do';
		    utils.ajax(url, function(data) {
				data = JSON.parse(data);
				if(data.state == 0 && data.total > 0) {
					maxPageNumber = data.maxPageNumber;
					var rows = JSON.parse(data.cmsContentList);
					if(rows != null && rows.length > 0){
						news.contentList = news.contentList.concat(rows);
						mui('#scroll').pullRefresh().endPullupToRefresh(false);
					}else{
						mui('#scroll').pullRefresh().endPullupToRefresh(true);
					}
				}else if(data.state == 0 && data.total == 0) {
					mui('#scroll').pullRefresh().endPullupToRefresh(true);
				}
			}, param);
			
		};
		
		/**
		 * 1、将服务端返回数据，转换成前端需要的格式
		 * 2、若服务端返回格式和前端所需格式相同，则不需要改功能
		 * 
		 * @param {Array} items 
		 */
		function convert(items) {
			var newContents = [];
			items.forEach(function(content) {
				newContents.push({
					oid: content.oid,
					title: content.title,
					publishStartTime: content.publishStartTime
				});
			});
			return newContents;
		}
		
		//查看新闻详情
		mui('.mui-content').on('tap', '[contentId]', function() {
			utils.showWaiting();
			var oid = this.getAttribute('contentId');
			var url = '../ygzw/public_info.html?oid='+oid;
			showTemplates('../ygzw/public_info.html','查看详情',url);
		});  
		
	</script>
</html>